import React, { Component } from 'react'
import {
    View,
    Text,
    Button,
    ActivityIndicator,
    TouchableOpacity,
    StyleSheet,
    FlatList
} from 'react-native'
import Toast from 'react-native-root-toast'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { loadMore, search } from '../../actions/CheckAction';
import Style from '../../utils/style/style'
import WXStyle from '../../utils/style/wxstyle';
import * as fetch from '../../utils/fetch'
import PrimaryButton from '../../views/primaryButton';
import Loading from '../../views/loading';
// import SearchInput from '../../components/input';
import CheckItem from '../../views/checkItem';
import DataList from '../../views/DataList';
import PageLoading from '../../components/pageLoding'
class Checks extends Component {
    constructor(props) {
        super(props);
    }
    static navigationOptions = {
        title: '盘点记录',
    };
    componentDidMount() {
        this._getData()
    }

    search = (text) => {
        this.props.search()
        setTimeout(() => {
            this._getData()
        })

    }

    _getData = () => {
        const api = "erp_inventorys";//如果把分页组件化 this.props.api
        let { pageNum, pageSize, hasMore, keyword } = this.props;
        pageNum = pageNum + 1;
        if (hasMore) {
            let params = {
                pageNum: pageNum,
                keyword: keyword,
                pageSize: pageSize,
                orderByDesc: 'inv_code'
            }
            if (keyword) {

                params['filter'] = "contains(Name,\'" + keyword + "\')"
            }
            this.props.loadMore(api, params);
        }
    }

    _fetchData(api, params) {
        this.props.loadMore(api, params)
    }

    _PageLoading = () => (
        <PageLoading
            hasMore={this.props.hasMore}
            loading={this.props.loading}
        />
    )
    _renderItem = ({ item }) => {
        return (
            <CheckItem
                id={item.RecId}
                item={item}
                pressItem={() => { this._pressItem(item) }}
            />
        )
    }
    _pressItem(item) {
        const itemStr = JSON.stringify(item);
        this.props.navigation.navigate('CheckDetail', { item: itemStr })
    }
    render() {

        const { loading, dataList, hasMore } = this.props;
        return (
            <View style={{ flex: 1 }}>
                {/* <View style={[Style.searchWrapper]}>
                    <TouchableOpacity style={styles.addWrap} onPress={() => this.props.navigation.navigate('ChecksAdd')}>
                        <Text style={styles.add} url="./add/add"> +</Text>
                    </TouchableOpacity>
                    <View style={[Style.centered]}>
                        <SearchInput search={this.search} />
                    </View>
                </View> */}
                {
                    !loading && !dataList ? <View style={{ flex: 1 }} /> : loading && !dataList ?
                        <Loading /> : !loading && dataList.length == 0 ?
                            <View style={{ flex: 1 }}>
                                <Text>暂无数据</Text>
                            </View> :
                            <DataList
                                data={dataList}
                                renderItem={this._renderItem}
                                LoadMore={this._getData}
                                loading={loading}
                                hadMore={hasMore}
                                footer={this._PageLoading}
                                itemHeight={81}
                            />
                }
                <View style={Style.mainAddButton}><PrimaryButton title="添加盘点" submit={() => this.props.navigation.navigate('ChecksAdd')} /></View>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    addWrap: {
        backgroundColor: '#efeff4'
    },
    add: {
        fontSize: 35,
        color: WXStyle.mainColor
    },

})

export default connect(
    state => ({
        loading: state.Checks.loading,
        keyword: state.Checks.keyword,
        dataList: state.Checks.dataList,
        pageNum: state.Checks.pageNum,
        hasMore: state.Checks.hasMore,
        pageSize: state.Checks.pageSize,
    }),
    dispatch => ({ search: bindActionCreators(search, dispatch), loadMore: bindActionCreators(loadMore, dispatch) })
)(Checks)